//window.addEventListener("load", init_cesta);
var cesta = null;


function init_cesta() {    
    
    
    myAjaxRules.ejecutarAJAX({
        method: "GET",
        url:"./php/getCategorias.php", 
        funcionRespuesta: mostrarCategorias
    });    
}

function mostrarCategorias (JSONCategorias) {
    //alert(JSONCategorias);
    var categorias = JSON.parse(JSONCategorias);
    for (var i in categorias) {
        tienda.addCategoria(categorias[i].idCategoria, categorias[i].nombreCategoria);        
    }    
    cargarDatosCategorias();
}


function asignarEventosCategorias() {
    //Eventos de categoría    
    var categorias = document.querySelectorAll(".categoria");
    var i;
    
    for (var i=0; i< categorias.length; i++) {
        categorias[i].onclick = function (event) {
            //Estilo DOM
            //var idCategoria = this.parentNode.getAttribute("data-categoria");
            //Estilo Javascript
            var id = this.parentNode.dataset.categoria;
            var nombre = this.textContent;            
            var datos = {
                idCategoria: id
            }
            
            //Versión JQuery
            //            $.ajax({
            //                url:"./php/getCategoria.php",
            //                type:"GET",
            //                data:  {
            //                    datos: JSON.stringify(datos)
            //                }
            //            }).done(
            //                function (JSONArticulos) {
            //                    seleccionarCategoria(JSONArticulos, id);
            //                }
            //                );
            //myAjaxRules.ejecutarAJAX({method: "GET",url:"./php/getCategoria.php",funcionRespuesta: seleccionarCategoria,JSObject:datos, datosCallback: id});
            
            myAjaxRules.ejecutarAJAX({
                method: "GET",                
                url:"./php/getCategoria.php", 
                funcionRespuesta: seleccionarCategoria,
                JSObject:datos,
                datosCallback: id,                                
                palabraBloqueo: "getCategoria"+id,
                fnProgreso: progresoLoadCategoria,
                selectorThis: event.target,
                //fnVerMensaje: function (msg) {console.log(msg)},
                descripcion: "Recuperar artículos de la categoría '" + nombre + "'",
                autoCierreAlertas: false,                
                ajaxTimeout: 7000,                
                reglasBloqueo: [
                [  
                
                
                {
                    permitir: true,
                    regExp: new RegExp ("getCategoria")
                },
                {
                    permitir: false,
                    selectorBloqueo: "[data-categoria='"+ id +"'] > .categoria",
                    regExp:/pepe/                 
                }
                        
                ,{
                permitir: false,
                regExp: new RegExp ("comprando"),
                tipoBloqueo: myAjaxRules.TIPOS_BLOQUEO.INDIRECTO
                } 
                ]
                ,[
                {
                    permitir: true
                }  
                ]
                ,[
                {
                    permitir: true,
                    //regExp: /com/,
                    selectorBloqueo:"[type='submit']"
                //tipoBloqueo: myAjaxRules.TIPOS_BLOQUEO.INDIRECTO
                }   
                ],
                {
                    propiedad: "url",
                    cadena: [
                        {
                         permitir:  false,
                         regExp: /disconnect\.php/
                        }
                    ]
                },
                [
                    {
                        permitir: false,
                        regExp: /comprando/,
                        tipoBloqueo: myAjaxRules.TIPOS_BLOQUEO.INDIRECTO
                    }
                ]
                ],
                
                 selectoresEstilo: [
                  {
                      selector: event.target,
                      classes:
                    {
                        valorPreparar:"ajax_esperar ajax_stripes ajax_progress-bar",
                        valorFinalizar: "ajax_RESET",
                        valorError: "ajax_error"
                    },
                    estilos: [
                    {
                        propiedad: "color",
                        valorPreparar: "yellow",
                        valorFinalizar: "green",
                        valorError: "red"
                    }
                    ]
                  },{
                    selector: "[type='reset']",
                    atributos: [
                    {
                        propiedad: "disabled",
                        valorPreparar: "disabled",
                        valorFinalizar: "",
                        valorError: ""
                    }
                    ] 
                }
                ,
                {
                    selector: "#mensajes2",
                    html: {                     
                        valorPreparar:  "Recuperando artículos de la categoría '" + nombre + "'.",
                        valorFinalizar: "Sin actividad en categorías"
                       
                    } ,
                   
                    eventos: [
                    {
                        tipo: "click",
                        funcionPreparar: function () {
                            alert("Descargando");
                        },
                        funcionFinalizar: function () {
                            alert("Finalizado");
                        },
                        funcionError: function () {
                            alert("Última acción con error");
                        }
                        
                    }
                    ]
            
                }
    ]
                
                
            });
            
            
            
        
        }
    }
}
    
    
function asignarEventosCantidad(categoria) {    
    
    for (var i in categoria.elementos) {            
        var input = document.getElementById(categoria.elementos[i].id);        
        input.onchange = gestionarCesta;        
    }
}

function actualizarPantalla(subtotal) {
    if (subtotal) {
        gestionarSubtotal(subtotal);
    }
    mostrarCesta();
    //alert(cesta.getLineas().tam());
    mostrarAviso(!cesta || cesta.getLineas().tam() == 0);
    actualizarTotal();
}

function gestionarCesta (event) {
    var cantidad = event.target.value;
    var idArticulo = event.target.id;
    if (!cesta) {
        cesta = new MODELO.Pedido(1, tienda.clientes.getElemento(1),new Date());
    }    
    cesta.modificarPedido(idArticulo, cantidad);
    actualizarPantalla(event.target);
}

function actualizarTotal () {
    var total = document.getElementById("totalPedido");
    if (!cesta || cesta.getLineas().tam() == 0) {
        total.textContent = "";
    } else {
        total.textContent = cesta.importePedido().toFixed(2);
    }
}

function gestionarSubtotal(input) {
    
    var subtotal = input.nextSibling.firstChild.nextSibling;
    var precio = input.parentNode.parentNode.getElementsByTagName("span")[1].textContent;
    var cantidad = input.value;
    
    
    //alert(subtotal.parentNode.style.visibility);
    if (cantidad>0) {
        subtotal.textContent = (precio*cantidad).toFixed(2);
        subtotal.parentNode.style.visibility = "visible";
    } else {
        subtotal.textContent = 0;
        subtotal.parentNode.style.visibility = "hidden";
    }
    
}

function mostrarAviso(visible) {
    var aviso = document.getElementById("description");
    
    if (visible) {
        aviso.style.visibility = "visible";
    } else {
        aviso.style.visibility = "hidden";
    }
}
     

function mostrarCesta() {
    var tablaCesta = document.getElementById("basketTable");
    var datosCesta = tablaCesta.getElementsByTagName("tbody")[0];
    var lineas = cesta.getLineas();
    
    datosCesta.innerHTML = "";
    for (var i in lineas.elementos) {
        
        var linea = lineas.elementos[i];
        /*
        html += '<tr>';
        html += '<td>' + linea.articulo.valor + '</td>';
        html += '<td><span>' + linea.importeLinea().toFixed(2) + '</span>€</td>';
        html += '<td><a href="#">Eliminar (X)</a></td>';
        html += '</tr>';
     */
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        tr.appendChild(td1);
        var articulo = document.createTextNode(linea.articulo.valor);
        td1.appendChild(articulo);
        var td2 = document.createElement("td");
        tr.appendChild(td2);
        var span = document.createElement("span");
        td2.appendChild(span);
        var importeLinea = document.createTextNode(linea.importeLinea().toFixed(2));
        td2.appendChild(importeLinea);
        var signoEuro = document.createTextNode("€");
        td2.appendChild(signoEuro);
        var td3 = document.createElement("td");
        tr.appendChild(td3);
        var link = document.createElement("a");
        td3.appendChild(link);        
        link.setAttribute('href', '#'+linea.articulo.id);
        //link.href="http://www.google.es"; También funciona así
        
        var textoEnlace = document.createTextNode("Eliminar (X)");
        link.appendChild(textoEnlace);
        
        datosCesta.appendChild(tr);
        
        link.onclick = enlaceBorrar;
    }
    
    
    
}

function enlaceBorrar(event) {
    myAjaxRules.ejecutarFakeAJAX({
        palabraBloqueo: "eliminar_articulo",
        funcionRespuesta: enlaceBorrar_interna,        
        delayFake: 3000,       
        reglasBloqueo: [
        [
        {
            permitir: false,
            regExp: new RegExp ("getCategoria")
        },
        {
            permitir: false,
            regExp: new RegExp ("eliminar_articulo")
        },
        {
            permitir: false,
            regExp: new RegExp ("comprando")
        },
        ]
        ]
        ,                
                
        selectoresEstilo: [                    
        {
            selector: "#basket",
            classes:
            {
                valorPreparar:"ajax_esperar"
            } 
        },{
            selector: "#basket a",
            classes:
            {
                valorPreparar:"ajax_esperar"
            } ,
            estilos: [
            {
                propiedad: "color",
                valorPreparar: "white"
            }
            ]
        }
        
        ]
    }); 
        
    function enlaceBorrar_interna () {
        var pos = event.target.href.indexOf("#");
        var idArticulo = event.target.href.substr(pos +1);

        cesta.modificarPedido(idArticulo ,0);

        var input = document.getElementById(idArticulo);            
        //alert(input.nextSibling.firstChild.nextSibling);
        var subtotal = input.nextSibling.firstChild.nextSibling;            
        subtotal.parentNode.style.visibility = "hidden";
        input.value = 0;
        mostrarCesta();
        //alert(cesta.getLineas().tam());
        mostrarAviso(!cesta || cesta.getLineas().tam() == 0);
        actualizarTotal();
    }
            
    return false;   
}



function cargarDatosCategorias() {

    var divProductos = document.getElementById("datosArticulos");
        
    var categorias = tienda.categoriasArticulos;
    var html = "";
    var i = 0;
    for (i in categorias.elementos) {        
        var categoria = categorias.elementos[i];
        html += '<div class="pcdawgroup" data-categoria="'+ categoria.id +'">';
        html += '<div class="grouptitle categoria_vacia categoria"<span>';
        html += categoria.valor;
        html += '</span></div>';
        
        
        html += '<div id="articulosCategoria' + categoria.id + '">';            
        html += '</div>';
        html += '</div>';
    }
    
    
    
    divProductos.innerHTML = html;
    
    asignarEventosCategorias();
    
    //Por si se hubieran cargado los artículos al principio
    for (i in categorias.elementos) { 
        var categoria = categorias.elementos[i];
        cargarDatosArticulos (categoria);
    }
    
}

function cargarDatosArticulos(categoria)  {    
    
    var divCategoria = document.getElementById('articulosCategoria' + categoria.id);
    //alert('articulosCategoria' + idCategoria);
    //alert()
    
    var html = "";
    for (var j in categoria.elementos) {
        var articulo = categoria.elementos[j];            
        html += '<div class="groupcontent">';
        html +='<label class="pcdawname"> <span >'+ articulo.valor +'</span> <span >'+articulo.precioArticulo+'</span>€</label>'
        html +='<span >';            
        html += '<input type="text" name="cantidad" id="'+articulo.id+'" value="0"/>';
        html += '<span class="groupcontent2 subtotal"> (<span ></span>€) </span>';
        html +='</span>';
        html += '</div>';            
    }    
    
    
    divCategoria.innerHTML = html;
    asignarEventosCantidad(categoria);
}
        
function seleccionarCategoria(JSONArticulos, idCategoria) {
    var divArticulos = document.getElementById('articulosCategoria' + idCategoria);
    var divCategoria = divArticulos.parentNode.firstChild;
    
    //alert(divCategoria.onclick);
    
    //Después de recuperar los artículos cambio el comportamiento
  
    
    toggleClass(divCategoria, "categoria_vacia", "categoria_no_vacia");
    addClass(divArticulos, "visible");
    divCategoria.onclick = function (event) {
        
        if (hasClass(divArticulos, "visible")) {
            toggleClass(divArticulos, "visible", "no_visible");
            toggleClass(divCategoria, "categoria_no_vacia", "categoria_vacia");
        } else {
            toggleClass(divArticulos, "no_visible", "visible");
            toggleClass(divCategoria, "categoria_vacia", "categoria_no_vacia");
        }
        
                
    }
    //alert(JSONArticulos);
    var articulos = JSON.parse(JSONArticulos);
    
    //EnJQuery no se parsea
    //var articulos = JSONArticulos;
    //
    //alert(idCategoria);
    //alert(JSONArticulos);
    var categoria = tienda.categoriasArticulos.getCategoria(idCategoria);
    
    for (var i in articulos) {
        categoria.addArticulo(articulos[i].idArticulo, articulos[i].nombreArticulo, articulos[i].precioArticulo);        
    }    
    cargarDatosArticulos(categoria);
    
}


function progresoLoadCategoria(params) {  
    if (!params.progreso) {
        params.progreso = 25;
    } else if (params.progreso < 65 ){
        params.progreso += 10;
    } else if (params.progreso < 80) {
        params.progreso += 5;
    } else if (params.progreso <= 95) {
        params.progreso +=1;
    }
    
        
    if (params.readyState >=1 && params.readyState < 5) {        
        $(params.selectorThis).css("width",params.progreso+ "%");
    } else {
        $(params.selectorThis).css("width", "");
    }
    
    
//console.log("params.readyState "+ params.readyState +" porcentaje=" + params.progreso +" width =" + $(params.selectorThis).css("width"));
//   alert(readyState);
}